<template>
  <div id="box">
    <div
      class="banner-top"
      v-if=" Object.keys(obj).length==0"
    >
      <h1><strong>悦积分2.0&nbsp;&nbsp;畅心悦目</strong><span>&nbsp;</span></h1>
      <h2>任务有结果、结果有认可、人人有自驱力<span>&nbsp;</span></h2>

    </div>
    <div
      class="banner-top"
      v-else
    >
      <h1><strong>{{obj.title}}</strong><span>&nbsp;</span></h1>
      <h2>{{obj.text}}<span>&nbsp;</span></h2>
      <img
        :src="obj.screen_img"
        alt=""
        class="rotates rotatesimg"
        style="margin-top: 20%;"
      />
    </div>
    <div class="banner-img rotatesimg">
      <img
        v-if='Object.keys(obj).length!=0'
        :src="obj.start_up_img"
        alt="首页"
      >
      <img
        v-else
        src=""
        alt=""
      />
    </div>
    <div class="footer">
      <img
        src=""
        alt=""
        style="width: 30px;height: 30px"
      >
      <h3>悦积分<span>|</span><span>V2.0</span></h3>
    </div>
    <div style="height:9vh;background:#fff;"></div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      timer: null,
      obj: {}
    };
  },
  methods: {
    // 自定义名称存储
    async getCustomName() {
      let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
      if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    async getUserId() {
      // localStorage.setItem("userId", "15755492842622949");
      // console.log(this.$route.query.prohibit);
      let Corp_Id,User_Id;
      if (
        this.$route.query.prohibit != "undefined" &&
        this.$route.query.prohibit == 1
      ) {
        localStorage.clear();
      } else {
        Corp_Id = localStorage.getItem("custid");
        User_Id = localStorage.getItem("userId");
      }
      // localStorage.clear();
      let corpId = this.$utils.getUrlKey("custid");
      if (corpId == null || corpId == "undefined") {
        corpId = Corp_Id;
      } else {
        localStorage.setItem("custid", corpId);
      }
      let code = "";
      var _this = this;
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code;
            },
            onFail: function(err) {}
          });
          _this.$http
            .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
            .then(res => {
              if (res.data.data != null && res.data.data.is_open == 1) {
                localStorage.setItem("userId", res.data.data.dd_id);
                localStorage.setItem("custid", corpId);
                localStorage.setItem("isOpen", 1);
                clearTimeout(_this.timer);
                _this.timer = null;
                _this.setTimer();
                _this.show_Rotation_chart();
                _this.getCustomName();
              } else {
                localStorage.setItem("isOpen", 0);
              }
            });
        } else {
          clearTimeout(_this.timer);
          _this.timer = null;
          let is_open = localStorage.getItem("isOpen");
          // alert(is_open)
          // let is_open = 1;
          if (is_open != null && is_open != "undefined" && is_open == 1) {
            _this.setTimer();
            _this.show_Rotation_chart();
            _this.getCustomName();
          } else {
            await dd.runtime.permission.requestAuthCode({
              corpId: corpId,
              onSuccess: function(result) {
                code = result.code;
              },
              onFail: function(err) {}
            });
            _this.$http
              .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
              .then(res => {
                if (res.data.data != null && res.data.data.is_open == 1) {
                  localStorage.setItem("isOpen", 1);
                  clearTimeout(_this.timer);
                  _this.timer = null;
                  _this.setTimer();
                  _this.show_Rotation_chart();
                  _this.getCustomName();
                } else {
                  localStorage.setItem("isOpen", 0);
                }
              });
          }
        }
      } else {
        await dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function(result) {
            code = result.code;
          },
          onFail: function(err) {}
        });
        _this.$http
          .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
          .then(res => {
            alert(JSON.stringify(res))
            if (res.data.data != null && res.data.data.is_open == 1) {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              localStorage.setItem("isOpen", 1);
              clearTimeout(_this.timer);
              _this.timer = null;
              _this.setTimer();
              _this.show_Rotation_chart();
              _this.getCustomName();
            } else {
              localStorage.setItem("isOpen", 0);
            }
          });
      }
    },
    async show_Rotation_chart() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getRotationPicture?corpId=${corpId}&userId=${userId}&type=7`
      );
      const { errcode, data } = res.data;
      if (errcode == "0000") {
        this.obj = data;
      }
    },
    setTimer() {
      if (this.timer == null) {
        this.timer = setTimeout(() => {
          this.$router.replace("/home");
        }, 3000);
      }
    }
  },
  created: function() {
    this.getUserId();
    //每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
  },
  destroyed: function() {
    // 每次离开当前界面时，清除定时器
    clearTimeout(this.timer);
    this.timer = null;
  }
};
</script>
<style scoped lang="less">
#box {
  overflow: hidden;
  font-size: 18px;
  background: #fff;
  .banner-img img {
    margin-top: 85px;
    width: 75vw;
    height: 38vh;
  }
  .footer {
    position: fixed;
    bottom: 20px;
    right: 0px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    margin-right: 50px;
  }
  .footer img {
    margin-top: 0.6rem;
    height: 1rem;
  }
  h1 {
    position: relative;
    float: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 26px;
    margin: 50px 0px 0px;
    width: 100%;
    text-align: center;
  }
  h1 span {
    position: absolute;
    top: 4px;
    right: 0;
    background: white;
    width: 100%;
    -webkit-animation: typing 3s steps(16) forwards, cursor 1s infinite;

    animation: typing 3s steps(16) forwards;
  }
  h2 {
    position: relative;
    float: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    width: 100%;
    text-align: center;
    font-weight: normal;
  }
  h2 span {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    width: 100%;
    -webkit-animation: typing 3s steps(16) forwards, cursor 1s infinite;

    animation: typing 3s steps(16) forwards;
  }
  @-webkit-keyframes typing {
    from {
      width: 100%;
    }
    to {
      width: 0;
    }
  }

  @keyframes typing {
    from {
      width: 100%;
    }
    to {
      width: 0;
    }
  }
  .rotatesimg {
    -webkit-animation: transform-5 2s ease 500ms alternate none 1;
    animation: transform-5 2s ease 500ms alternate none 1;
  }
  @-webkit-keyframes transform-5 {
    from {
      -webkit-transform: perspective(800px) rotateY(180deg);
      transform: perspective(100px) rotateY(180deg);
    }
    to {
      -webkit-transform: perspective(100px) rotateY(0deg);
      transform: perspective(100px) rotateY(0deg);
    }
  }
  @keyframes transform-5 {
    from {
      -webkit-transform: perspective(800px) rotateY(180deg);
      transform: perspective(800px) rotateY(180deg);
    }
    to {
      -webkit-transform: perspective(800px) rotateY(0deg);
      transform: perspective(800px) rotateY(0deg);
    }
  }
}
</style>


